import React, { useState } from 'react';
import { Row, Col, Radio } from 'antd';
import ListReport from './ReportTable';
import { useModel } from 'umi';
// export const pieTtems = {
//   ACBL_DGCK: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   ACBL_DGCK_BBLC: ['PERD', 'CYNO', 'ITID'],
//   ACBL_DGCK_DECD: ['PERD', 'CYNO', 'ITID'],
//   ACBL_DGCK_BZJ: ['PERD', 'CYNO', 'ITID'],
//   ACBL_DGDK: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   ACBL_DGDK_ZT: ['PERD', 'CYNO', 'ITID'],
//   ACBL_DGDK_BAOL: ['PERD', 'CYNO', 'ITID'],
//   ACBL_DGDK_DX: ['PERD', 'CYNO', 'ITID'],
//   ACBL_DGDK_ZX: ['PERD', 'CYNO', 'ITID'],
//   ACBL_DGDK_XW: ['PERD', 'CYNO', 'ITID'],
//   ACBL_DGDK_PH: ['PERD', 'CYNO', 'ITID'],
//   ACBL_DGDK_BL: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   ACBL_GS_FBBLC: ['TPNO', 'PERD', 'CYNO'],
//   SALE_GS_FBBLC: ['TPNO', 'PERD', 'CYNO'],
//   ZS_DGTX: ['TPNO', 'CYNO', 'ITID'],
//   ZS_GS: ['ITID', 'CYNO'],
//   ZS_GJ: ['ITID', 'CYNO'],
//   ZS_TY: ['ITID', 'CYNO'],
//   ZS_TH: ['ITID', 'CYNO'],
//   ZS_QT: ['ITID', 'CYNO'],
//   FTP_DGCK: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   FTP_DGDK: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   ZBCB_GS: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   ACBL_DGCK_YBCK: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   ACBL_DGDK_YBDK: ['PERD', 'CYNO', 'ITID'],
//   ACBL_TYZC: ['PERD', 'CYNO', 'ITID'],
//   ACBL_CX: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   ACBL_CX_BBLC: ['PERD', 'CYNO', 'ITID'],
//   ACBL_CX_DECD: ['PERD', 'CYNO', 'ITID'],
//   ACBL_GRDK: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   ACBL_GRDK_ZF: ['PERD', 'CYNO', 'ITID'],
//   ACBL_GRDK_SYF: ['PERD', 'CYNO', 'ITID'],
//   ACBL_GRDK_JYD: ['PERD', 'CYNO', 'ITID'],
//   ACBL_GRDK_XFD: ['PERD', 'CYNO', 'ITID'],
//   ACBL_GRDK_QT: ['PERD', 'CYNO', 'ITID'],
//   ACBL_GRDK_PH: ['PERD', 'CYNO', 'ITID'],
//   ACBL_GRDK_JED: ['PERD', 'CYNO', 'ITID'],
//   ACBL_GRDK_BL: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   ACBL_ZJL: ['TPNO', 'PERD', 'CYNO'],
//   ACBL_LS_FBBLC: ['TPNO', 'PERD', 'CYNO'],
//   SALE_LS_FBBLC: ['TPNO', 'CYNO'],
//   SALE_LS_SFDX: ['TPNO', 'CYNO'],
//   SALE_LS_JJ: ['TPNO', 'CYNO'],
//   SALE_LS_JJDT: ['TPNO', 'CYNO'],
//   SALE_LS_GZ: ['TPNO', 'CYNO'],
//   SALE_LS_JYGJS: ['TPNO', 'CYNO'],
//   SALE_LS_SWGJS: ['TPNO', 'CYNO'],
//   SALE_LS_BX: ['TPNO', 'CYNO'],
//   ZS_LS: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   ZS_LS_FBL: ['ITID', 'CYNO'],
//   FTP_CXCK: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   FTP_GRDK: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   ZBGB_LS: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_11: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_12: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_13: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_14: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_142: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_143: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_15: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_41: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_42: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_21: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_22: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_23: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_232: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_24: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_25: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_26: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_30: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_31: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_32: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_81: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_82: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_83: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_51: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_52: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_53: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_54: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_55: ['PERD', 'CYNO', 'ITID'],
//   ACBL_CX_YBCX: ['TPNO', 'PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_61: ['PERD', 'CYNO', 'ITID'],
//   CDK_ACBL_62: ['PERD', 'CYNO', 'ITID'],
//   ZS_LS_BL: ['TPNO', 'CYNO', 'ITID'],
//   ZS_LS_4773: ['CYNO', 'ITID'],
//   ZS_LS_4771: ['CYNO', 'ITID'],
//   ZS_LS_4775: ['CYNO', 'ITID'],
//   ZS_LS_4772: ['CYNO', 'ITID'],
//   ZS_LS_4774: ['CYNO', 'ITID'],
//   ZS_HJ: ['TPNO', 'CYNO', 'ITID'],
// };
type PropField = {
  sdate: Date | string;
  edate: Date | string;
  cyno: string;
  timeLevel: string;
  emplLevel: string;
  emplID: number;
  colName: string;
  groupCalc: string;
  vertical: boolean;
};
const EmplDataChart: React.FC<PropField> = (props) => {
  const { pieItems } = useModel('options');
  const { sdate, edate, cyno, timeLevel, emplLevel, emplID, colName, vertical, groupCalc } = props;
  let initItemType = null;
  if (pieItems && pieItems![colName]) {
    initItemType = pieItems![colName][0];
  }
  const [itemType, setItemType] = useState(initItemType);
  const paramVals = { date: edate, cyno, timeLevel, emplLevel, emplID: '' + emplID, colName };
  const paramVals2 = { sdate, edate, cyno, emplLevel, emplID: '' + emplID, colName, itemType };
  const items = { TPNO: '业务种类', PERD: '期限', CYNO: '币种', ITID: '科目' };
  const span = vertical ? 24 : 12;
  let lcReptName = groupCalc === 'sum' ? 'ch_empl_ywfx_column' : 'ch_empl_ywfx_lineColumn';
  let pieReptName = groupCalc === 'sum' ? 'ch_empl_ywfx_pie_sum' : 'ch_empl_ywfx_pie';
  if (emplLevel === 'all') {
    lcReptName = groupCalc === 'sum' ? 'ch_all_ywfx_column' : 'ch_all_ywfx_lineColumn';
    pieReptName = groupCalc === 'sum' ? 'ch_all_ywfx_pie_sum' : 'ch_all_ywfx_pie';
  } else if (emplLevel === 'dept1') {
    lcReptName = groupCalc === 'sum' ? 'ch_dept1_ywfx_column' : 'ch_dept1_ywfx_lineColumn';
    pieReptName = groupCalc === 'sum' ? 'ch_dept1_ywfx_pie_sum' : 'ch_dept1_ywfx_pie';
  } else if (emplLevel === 'dept2') {
    lcReptName = groupCalc === 'sum' ? 'ch_dept2_ywfx_column' : 'ch_dept2_ywfx_lineColumn';
    pieReptName = groupCalc === 'sum' ? 'ch_dept2_ywfx_pie_sum' : 'ch_dept2_ywfx_pie';
  }
  let unit = 0;
  if (colName.startsWith('NUM_')) {
    unit = 1;
  }
  return (
    <Row style={{ marginTop: -16 }}>
      <Col span={span} key="lineColumn">
        <ListReport
          reportName={lcReptName}
          hideParamBar={true}
          paramVals={paramVals}
          height={400}
          unit={unit}
          refresh={true}
        />
      </Col>
      {itemType ? (
        <Col span={span} key="pie" style={{ paddingLeft: 10 }}>
          <div style={{ right: 10, marginTop: -15, position: 'absolute', zIndex: 1000 }}>
            <Radio.Group
              value={itemType}
              size="small"
              style={{ marginTop: 16 }}
              onChange={(e) => setItemType(e.target.value)}
            >
              {pieItems![colName].map((name: string, i: number) => (
                <Radio.Button key={i as React.Key} value={name}>
                  {items[name]}
                </Radio.Button>
              ))}
            </Radio.Group>
          </div>
          <ListReport
            reportName={pieReptName}
            hideParamBar={true}
            paramVals={paramVals2}
            height={345}
            unit={unit}
            refresh={true}
          />
        </Col>
      ) : null}
    </Row>
  );
};
export default EmplDataChart;
